{% extends "base.html" %}

{% block head %}
<style>
/* 液态玻璃页面标题 */
.page-title {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}

.page-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.page-title h2 {
    color: #1C1C1E !important;
    text-shadow: 0 2px 4px rgba(0, 122, 255, 0.1);
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.5rem;
}

/* 液态玻璃卡片 */
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem !important;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.card-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    padding: 1rem 1.5rem !important;
    position: relative;
    z-index: 1;
}

.card-header h6 {
    color: #1C1C1E !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.card-body {
    position: relative;
    z-index: 1;
    color: #1C1C1E !important;
    padding: 1.5rem !important;
}

/* 液态玻璃表单元素 */
.form-label {
    color: #1C1C1E !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    color: #1C1C1E !important;
    transition: var(--transition) !important;
    padding: 0.75rem 1rem !important;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 0 0 0.2rem rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px);
    outline: none;
}

.form-control::placeholder {
    color: rgba(28, 28, 30, 0.6) !important;
}

.form-text {
    color: rgba(28, 28, 30, 0.7) !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
}

/* 液态玻璃按钮 */
.btn {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: var(--transition) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.btn-primary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 1.5rem !important;
}

.btn-primary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 1.5rem !important;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

/* 液态玻璃代码块 */
pre {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--border-radius) !important;
    padding: 1.5rem !important;
    color: #1C1C1E !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    overflow-x: auto !important;
    position: relative;
    overflow: hidden;
}

pre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

pre code {
    position: relative;
    z-index: 1;
    color: #1C1C1E !important;
}

/* 液态玻璃列表 */
ul {
    color: rgba(28, 28, 30, 0.8) !important;
}

ul li {
    margin-bottom: 0.5rem !important;
}

/* 液态玻璃标题 */
h6 {
    color: #1C1C1E !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

/* 液态玻璃段落 */
p {
    color: rgba(28, 28, 30, 0.8) !important;
    margin-bottom: 1rem !important;
}

/* 暗色模式适配 */
[data-theme="dark"] .page-title {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .page-title::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .page-title h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .card {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .card-header {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .card-header h6 {
    color: #ffffff !important;
}

[data-theme="dark"] .card-body {
    color: #ffffff !important;
}

[data-theme="dark"] .form-label {
    color: #ffffff !important;
}

[data-theme="dark"] .form-control {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .form-control:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .form-text {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .btn-primary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] pre {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

[data-theme="dark"] pre::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] pre code {
    color: #ffffff !important;
}

[data-theme="dark"] ul {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] h6 {
    color: #ffffff !important;
}

[data-theme="dark"] p {
    color: rgba(255, 255, 255, 0.8) !important;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="page-title">
        <h2><i class="fas fa-upload me-2"></i>上传自定义脚本</h2>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- 上传表单卡片 -->
            <div class="card">
                <div class="card-header">
                    <h6>
                        <i class="fas fa-upload me-2"></i>上传自定义脚本
                    </h6>
                </div>
                <div class="card-body">
                    <form method="POST" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="name" class="form-label">
                                <i class="fas fa-tag me-1"></i>脚本名称 <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control" id="name" name="name" required 
                                   placeholder="请输入脚本名称">
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>脚本的唯一标识名称
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">
                                <i class="fas fa-align-left me-1"></i>脚本描述
                            </label>
                            <textarea class="form-control" id="description" name="description" rows="3" 
                                      placeholder="请输入脚本描述（可选）"></textarea>
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>描述脚本的功能和用途
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="folder" class="form-label">
                                <i class="fas fa-folder me-1"></i>上传到文件夹
                            </label>
                            <select class="form-control" id="folder" name="folder">
                                <option value="">根目录</option>
                            </select>
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>选择要上传到的文件夹，留空则上传到根目录
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="script" class="form-label">
                                <i class="fas fa-file-code me-1"></i>脚本文件 <span class="text-danger">*</span>
                            </label>
                            <input type="file" class="form-control" id="script" name="script" required 
                                   accept=".py">
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>只支持Python脚本文件(.py)
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('extended_scripts') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>返回
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-upload me-1"></i>上传脚本
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 使用说明卡片 -->
            <div class="card">
                <div class="card-header">
                    <h6>
                        <i class="fas fa-info-circle me-2"></i>脚本编写指南
                    </h6>
                </div>
                <div class="card-body">
                    <h6>
                        <i class="fas fa-list-check me-1"></i>基本要求
                    </h6>
                    <ul>
                        <li>脚本必须是有效的Python代码</li>
                        <li>支持命令行参数传递</li>
                        <li>建议添加适当的错误处理</li>
                        <li>使用sys.exit(0)表示成功，sys.exit(1)表示失败</li>
                    </ul>
                    
                    <h6 class="mt-3">
                        <i class="fas fa-code me-1"></i>示例脚本
                    </h6>
                    <pre><code>#!/usr/bin/env python3
import sys
import json
import datetime

def main():
    """主函数"""
    try:
        # 获取命令行参数
        args = sys.argv[1:]
        print(f"[{datetime.datetime.now()}] 脚本开始执行")
        print(f"参数: {args}")
        
        # 解析参数
        if args:
            # 处理参数
            for arg in args:
                print(f"处理参数: {arg}")
        
        # 您的业务逻辑
        print("执行业务逻辑...")
        
        # 模拟一些工作
        import time
        time.sleep(1)
        
        print("执行完成！")
        sys.exit(0)  # 成功退出
        
    except Exception as e:
        print(f"执行失败: {e}")
        sys.exit(1)  # 失败退出

if __name__ == "__main__":
    main()</code></pre>
                    
                    <h6 class="mt-3">
                        <i class="fas fa-exclamation-triangle me-1"></i>脚本要求
                    </h6>
                    <p>脚本应该能够独立运行，无需外部参数：</p>
                    <ul>
                        <li>支持无参数执行</li>
                        <li>包含适当的错误处理</li>
                        <li>使用sys.exit(0)表示成功</li>
                        <li>使用sys.exit(1)表示失败</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 加载文件夹列表
function loadFolders() {
    fetch('{{ url_for("list_custom_folders") }}')
        .then(response => response.json())
        .then(data => {
            const select = document.getElementById('folder');
            
            if (data.error) {
                console.error('加载文件夹列表失败:', data.error);
                return;
            }
            
            // 清空现有选项（保留根目录选项）
            select.innerHTML = '<option value="">根目录</option>';
            
            // 添加文件夹选项
            data.folders.forEach(folder => {
                const option = document.createElement('option');
                option.value = folder.name;
                option.textContent = folder.name;
                select.appendChild(option);
            });
        })
        .catch(error => {
            console.error('加载文件夹列表失败:', error);
        });
}

// 页面加载完成后加载文件夹列表
document.addEventListener('DOMContentLoaded', function() {
    loadFolders();
});
</script>

{% endblock %} 